<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>Slideshow</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" type="text/css" media="all" href="style.css" />
        <script src="mootools-core-1.3-full-nocompat.js" type="text/javascript"></script>
    </head>

    <body>
        <script>
            var NicePopup = NicePopup || {};

            NicePopup.Mask = new Class({
                Implements: [Options, Events],

                elements: {},
                fx: {},
                isSupplementary: false,
                state: 'hide',
                positionFunction: null,
                hiddenElements: {},
                availableTransitions: ['slideup', 'slidedown', 'slideleft', 'slideright', 'slidecenter', 'shuttervertical', 'shutterhorizontal', 'none', 'slideup+fade', 'slidedown+fade', 'slideleft+fade', 'slideright+fade', 'slidecenter+fade', 'shuttervertical+fade', 'shutterhorizontal+fade', 'fade', 'none+fade', 'random'],

                'options': {
                    'enable': true,
                    'color': '#000',
                    'opacity': 0.5,
                    'styles': {
                        'position': 'fixed',
                        'top': 0,
                        'left': 0
                    },
                    'transitions': {
                        'show': 'random',
                        'hide': 'random',
                        'duration': 300,
                        'equation': 'expo:out'
                    }
                },

                initialize: function (options) {
                    this.setOptions(options);

                    if (this.options.enable === false) return false;
                    
                    this.ieIE6 = true;
                    this.buildHTML();
                    this.position('init');
                },

                buildHTML: function () {
                    this.options.styles.position = this.ieIE6 ? 'absolute' : this.options.styles.position;
                    this.elements.mask = new Element('DIV', {
                        'styles': Object.merge(this.options.styles, {
                            'background-color': this.options.color,
                            'opacity': this.options.opacity,
                            'display': 'none'
                        })
                    }).inject(document.id(document.body), 'inside');
                   
                    this.fx.mask = new Fx.Morph(this.elements.mask, {
                        'duration': this.options.transitions.duration,
                        'transition': this.options.transitions.equation,
                        'link': 'cancel'
                       
                    });
                    
                    // TODO: Remove this
                    this.elements.mask.addEvent('click', this.hide.bind(this));
                    
                    if (this.options.transitions.show.test('^shuttervertical|shutterhorizontal|random', 'i') || this.options.transitions.hide.test('^shuttervertical|shutterhorizontal|random', 'i')) {
                        this.isSupplementary = true;
                        this.supplementaryHTML();
                    }
                },
                
                supplementaryHTML: function () {
                    this.elements.supplement = this.elements.mask.clone(false).inject(document.id(document.body), 'inside');
                    this.fx.supplement = new Fx.Morph(this.elements.supplement, {
                        'duration': this.options.transitions.duration,
                        'transition': this.options.transitions.equation,
                        'link': 'cancel',
                        'onCancel': function () {
                            this.elements.supplement.setStyle('display', 'none');
                        }.bind(this),
                        'onComplete': function () {
                            this.elements.supplement.setStyle('display', 'none');
                        }.bind(this)
                    });                    
                },

                position: function (action) {
                    var size = document.getSize();
                    var scroll = document.getScroll();
                    var scrollSize = document.getScrollSize();

                    this.elements.mask.store('size', {
                        'x': size.x,
                        'y': size.y,
                        'sx': scroll.x,
                        'sy': scroll.y,
                        'ssx': scrollSize.x,
                        'ssy': scrollSize.y
                    });
                    
                    // Stop here if only initialize action
                    if (action == 'init') {
                        this.isSupplementary && this.elements.supplement.store('size', this.elements.mask.retrieve('size'));
                        return false;
                    }

                    if (this.isSupplementary) {
                        this.elements.supplement.store('size', size);
                        this.elements.supplement.setStyle('display', 'none');
                    }
               
                    this.elements.mask.setStyles({
                        'width': this.state == 'show' ? (this.ieIE6 ? scrollSize.x : size.x) : 0,
                        'height': this.state == 'show' ? (this.ieIE6 ? scrollSize.y : size.y) : 0,
                        'top': 0,
                        'left': 0,
                        'opacity': this.state == 'show' ? this.options.opacity : 0
                    });
                    // cancel Fx transition
                    this.fx.mask && this.fx.mask.cancel();
                    this.fx.supplement && this.fx.supplement.cancel();
                },

                display: function (action, display) {
                    this.ieIE6 && this.position('init');
                    var size = this.elements.mask.retrieve('size');
                    var scrollSize = document.getScrollSize();
                 
                    if (this.ieIE6) {
                        this.elements.mask.setStyles({
                            'top': size.sy,
                            'left': size.sx
                        });
                    }
                    
                    // Use random effect
                    if (action.test('random', 'i')) {
                        action = this.availableTransitions.slice(0,-1).getRandom();
                    } 

                    var actionMethod = action.toLowerCase().match(/^(\w+)\s?\+\s?(\w+)$/) || [null, action.toLowerCase(), null];
                    
                   
                    var opacity = {};
                    switch (actionMethod[2] + display.capitalize()) {
                        case 'fadeShow':
                            this.fx.mask.set({'opacity': 0});
                            this.isSupplementary && this.fx.supplement.set({'opacity': 0});
                            opacity = {'opacity': this.options.opacity};
                            break;
                        case 'fadeHide':
                            this.fx.mask.set({'opacity': this.options.opacity});
                            this.isSupplementary && this.fx.supplement.set({'opacity': this.options.opacity});
                            opacity = {'opacity': 0};
                            break;
                    }
                    
                    if (display == 'show') {
                        this.elements.mask.setStyle('display', 'block');
                        this.isSupplementary && this.elements.supplement.setStyles({'display': 'block', 'left': this.ieIE6 ? this.elements.mask.retrieve('size').sx : 0, 'top': this.ieIE6 ? this.elements.mask.retrieve('size').sy : 0, 'width': 0, 'height': 0, 'opacity': this.options.opacity});
                    }
                    
                    this.isSupplementary && this.fx.supplement.cancel();
        
                    this.animation(display, actionMethod[1], size, opacity).chain(function () {
                        this.state = display;
                        if (display == 'show') {  
                            this.elements.mask.setStyles({
                                'width': this.elements.mask.retrieve('size')[this.ieIE6 ? 'ssx' : 'x'],
                                'height': this.elements.mask.retrieve('size')[this.ieIE6 ? 'ssy' : 'y'],
                                'top': 0,
                                'left': 0
                            });
                            this.isSupplementary && this.elements.supplement.setStyle('display', 'none');
                        } else {
                            this.elements.mask.setStyles({
                                'display': 'none',
                                'width': 0,
                                'height': 0,
                                'top': this.ieIE6 ? this.elements.mask.retrieve('size').sy : 0,
                                'left': this.ieIE6 ? this.elements.mask.retrieve('size').sx : 0,
                                'opacity': this.options.opacity
                            });  
                        }

                        this.fireEvent(this.state.toLowerCase() + 'Complete', display);
                    }.bind(this));

                },
                
                animation: function (display, transition, size, opacity) {
                    switch(transition + display.capitalize()) {
                       
                        case 'slideupShow': 
                            return this.fx.mask.set({'width': size.x}).start(Object.merge({'height': [size.y]}, opacity));
                            break;   

                        case 'slidedownShow': 
                            return this.fx.mask.set({'width': size.x}).start(Object.merge({'height': [0, size.y], 'top': [size.y + (this.ieIE6 ? size.sy : 0), this.ieIE6 ? size.sy : 0]}, opacity));
                            break;  

                        case 'slideleftShow': 
                            return this.fx.mask.set({'height': size.y}).start(Object.merge({'width': [0, size.x]}, opacity)); 
                            break;  

                        case 'sliderightShow': 
                            return this.fx.mask.set({'height': size.y}).start(Object.merge({'width': [0, size.x], 'left': [size.x, this.ieIE6 ? size.sx : 0]}, opacity)); 
                            break;  

                        case 'slidecenterShow': 
                            return this.fx.mask.set({'top': (size.y / 2) + (this.ieIE6 ? size.sy : 0), 'left': (size.x / 2) + (this.ieIE6 ? size.sx : 0)}).start(Object.merge({'top': this.ieIE6 ? size.sy : 0, 'left': this.ieIE6 ? size.sx : 0, 'width': [0, size.x], 'height': [0, size.y] }, opacity));
                            break;  
                    
                        case 'shutterhorizontalShow':
                            this.fx.supplement.set({'width': size.x, 'top': size.y + (this.ieIE6 ? size.sy : 0)}).start(Object.merge({'display': 'block', 'top': (size.y /2) + (this.ieIE6 ? size.sy : 0), 'height': [0, (size.y / 2)]}, opacity));
                            return this.fx.mask.set({'width': size.x}).start(Object.merge({'height': [0, size.y / 2]}, opacity));
                            break;
                            
                        case 'shutterverticalShow':
                            this.fx.supplement.set({'height': size.y, 'left': size.x}).start(Object.merge({'display': 'block', 'left': (size.x / 2) + (this.ieIE6 ? size.sx : 0), 'width': [0, size.x / 2]}, opacity));
                            return this.fx.mask.set({'height': size.y}).start(Object.merge({'width': [0, size.x / 2]}, opacity));
                            break;
                            
                        case 'fadeShow':
                            return this.fx.mask.set({'width': size.x, 'height': size.y, 'opacity': 0}).start(Object.merge({'opacity': this.options.opacity}, opacity));
                            break;  
                        
                        case 'noneShow': 
                            return this.fx.mask.set({'width': size.x, 'height': size.y}).start(opacity); 
                            break;  
                            
                        case 'slideupHide':  
                            return this.fx.mask.set({'width': size.x}).start(Object.merge({'height': [size.y, 0]}, opacity));   
                            break; 

                        case 'slidedownHide':  
                            return this.fx.mask.set({'width': size.x}).start(Object.merge({'top': [this.ieIE6 ? size.sy : 0, size.y + (this.ieIE6 ? size.sy : 0)], 'height': [size.y, 0]}, opacity));
                            break;

                        case 'slideleftHide':  
                            return this.fx.mask.set({'height': size.y}).start(Object.merge({'width': [size.x, 0]}, opacity));   
                            break; 

                        case 'sliderightHide':  
                            return this.fx.mask.set({'height': size.y}).start(Object.merge({'width': [size.x, 0], 'left': [this.ieIE6 ? size.sx : 0, size.x]}, opacity)); 
                            break;

                        case 'slidecenterHide': 
                            return this.fx.mask.set({'width': size.x, 'height': size.y}).start(Object.merge({'top': [this.ieIE6 ? size.sy : 0, (size.y / 2) + (this.ieIE6 ? size.sy : 0)], 'left': [this.ieIE6 ? size.sx : 0, (size.x / 2) + (this.ieIE6 ? size.sx : 0)], 'width': 0, 'height': 0 }, opacity)); 
                            break;
                            
                        case 'shutterhorizontalHide':
                            this.fx.supplement.set({'width': size.x, 'left': 0, 'top': (size.y / 2) + (this.ieIE6 ? size.sy : 0)}).start(Object.merge({'display': 'block', 'height': [(size.y / 2), 0], 'top': size.y + (this.ieIE6 ? size.sy : 0)}, opacity));
                            return this.fx.mask.set({'width': size.x}).start(Object.merge({'height': [size.y / 2, 0]}, opacity));
                            break;
                            
                        case 'shutterverticalHide':
                            this.fx.supplement.set({'height': size.y, 'top': this.ieIE6 ? size.sy : 0}).start(Object.merge({'display': 'block', 'left': [size.x / 2, size.x], 'width': [size.x / 2, 0]}, opacity));
                            return this.fx.mask.set({'height': size.y}).start(Object.merge({'width': [size.x / 2, 0]}, opacity));
                            break;
                            
                        case 'fadeHide': 
                            return this.fx.mask.set({'width': size.x, 'height': size.y, 'opacity': this.options.opacity}).start(Object.merge({'opacity': 0}, opacity)); 
                            break
                        
                        case 'noneHide':  
                            return this.fx.mask.set({'width': 0, 'height': 0}).start(opacity);
                            break;
                    }
                    return this.fx.mask;
                },
                
                isTransitionsAvailable: function (transition) {
                    if (this.availableTransitions.indexOf(transition.replace(/\s+/g, '').toLowerCase()) == -1) {
                        throw new Error('You use a wrong transition effect');  
                        return false;
                    }
                    return true;
                },

                show: function () {
                    this.toggleButtons('hide');
                    if (this.isTransitionsAvailable(this.options.transitions.show) && this.options.enable) {
                        this.state = 'show';
                        this.fireEvent(this.state);
                        this.display(this.options.transitions.show, this.state);
                        
                        this.positionFunction = this.position.bind(this);
                        window.addEvent('resize', this.positionFunction);
                        this.ieIE6 && window.addEvent('scroll', this.positionFunction);
                    }
                },

                hide: function () {
                    this.toggleButtons('show');
                    if (this.isTransitionsAvailable(this.options.transitions.hide) && this.options.enable) {
                        this.state = 'hide';
                        this.fireEvent(this.state);
                        this.display(this.options.transitions.hide, this.state);
                        
                        if (typeOf(this.positionFunction) == 'function') {
                            window.removeEvent('resize', this.positionFunction);
                            this.ieIE6 && window.removeEvent('scroll', this.positionFunction);
                        }
                    }
                },
                
                toggleButtons: function (action) {
                    switch (action) {
                        case 'show':
                            console.log(this.hiddenElements);
                            this.hiddenElements.each(function (element, value) {
                                typeOf(element) == 'element' && element.setStyle('visibility', value);
                            }, this)
                            break;
                        case 'hide':
                            document.getElements('select').each(function (element) {
                                this.hiddenElements[element] = element.getStyle('visibility');
                                element.setStyle('visibility', 'hidden');
                            }, this);
                            break
                    }
                    
                }
            });
            
            
            NicePopup.Window = new Class({
                Implements: [Options, Events],

                elements: {},
                scrollDelta: {},
                fx: {},
                mask: null,
                
                availableTransitions: ['slideup', 'slidedown', 'slideleft', 'slideright', 'slidecenter', 'fade', 'none', 'random'],
               
                'options': {
                    'enable': true,
                    'classes': {'container': 'nicePopup', 'close': 'nicePopupClose', 'content': 'nicePopupContent'},
                    'width': '300px',
                    'height': '300px',
                    'data': '<div align=center>Simple hello text</div><br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
                    'close': {
                        'position': 'left',
                        'escape': true,
                        'padding': 20
                    },
                    'resize': {
                        'method': 'scroll',
                        'padding': 15
                    },
                    
                    'transitions': {
                        'show': 'random',
                        'hide': 'random',
                        'duration': 'short',
                        'equation': 'cubic:out',
                        'opacity': {'show': 1, 'hide': 0},
                        'padding': 50
                    }
                },

                initialize: function (options) {
                    this.setOptions(options);

                    if (this.options.enable === false) return false;
                    this.size = {'width': this.options.width.toInt(), 'height': this.options.height.toInt()};
                    
                    window.addEvent('domready', function() {
                        this.scrollDelta = document.getScroll();
                    }.bind(this));
                    
                    this.buildHTML();
                },

                buildHTML: function () {
                    this.elements.container = new Element('DIV', {
                        'class': this.options.classes.container,
                        'styles': {
                            'position': 'fixed',
                            'width': this.size.width,
                            'height': this.size.height,
                            'display': 'none',
                            'visibility': 'hidden'
                        }
                    }).inject(document.id(document.body));
                    
                    this.elements.close = new Element('DIV', {
                        'class': this.options.classes.close,
                        'styles': {
                            'position': 'absolute'
                        },
                        'events': {
                            'click': this.hide.bind(this)
                        }
                    }).inject(this.elements.container);
                    
                    switch (this.options.close.position) {
                        case 'left':
                            this.elements.close.setStyles({
                                'left': -this.options.close.padding,
                                'top': -this.options.close.padding
                            });
                            break;
                        case 'right':
                            this.elements.close.setStyles({
                                'right': -this.options.close.padding,
                                'top': -this.options.close.padding
                            });
                            break;
                    }
                    
                    this.elements.content = new Element('DIV', {
                        'html': this.options.data,
                        'class': this.options.classes.content
                    }).inject(this.elements.container);
                    
                    this.fx.popap = new Fx.Morph(this.elements.container, {
                        'duration': this.options.transitions.duration,
                        'transition': this.options.transitions.equation,
                        'link': 'cancel'
                    });
                    
                    this.fx.content = new Fx.Tween(this.elements.content, {
                        'duration': 'short',
                        'link': 'cancel'
                    });
                },
                
                center: function () {
                    var size = window.getSize();
                    
                    switch (this.options.resize.method) {
                        case 'fit':
                            var styles = {};
   
                            if (size.x < this.size.width + (this.options.resize.padding * 2)) {
                                styles = Object.merge(styles, {
                                    'width': size.x - (this.options.resize.padding * 2),
                                    'height': this.size.height,
                                    'left': this.options.resize.padding});
                            } else {
                                styles = Object.merge(styles, {
                                    'width': this.size.width, 
                                    'height': this.size.height,
                                    'left': size.x / 2 - this.options.width.toInt() / 2});
                        
                            }
                            if (size.y < this.size.height + (this.options.resize.padding * 2)) {
                                styles = Object.merge(styles, {
                                    'width': this.size.width, 
                                    'height': size.y - (this.options.resize.padding * 2), 
                                    'top': this.options.resize.padding});
                            } else  {
                                styles = Object.merge(styles, {
                                    'width': this.size.width, 
                                    'height': this.size.height, 
                                    'top': size.y / 2 - this.size.height / 2});
                            }
                    
                            this.fx.popap.set(styles);
                            break;
                        case 'scroll':
                            var styles = {'width': this.size.width, 'height': this.size.height};
   
                            if (size.x < this.size.width + (this.options.resize.padding * 2)) {
                                styles = Object.merge(styles,{'left': this.options.resize.padding});
                            } else {
                                styles = Object.merge(styles,{'left': size.x / 2 - this.options.width.toInt() / 2});
                        
                            }
                            if (size.y < this.size.height + (this.options.resize.padding * 2)) {
                                styles = Object.merge(styles, {'top': this.options.resize.padding});
                            } else  {
                                styles = Object.merge(styles, {'top': size.y / 2 - this.size.height / 2});
                            }
                    
                            this.fx.popap.set(styles);
                            // Renew delta value
                            this.scrollDelta = document.getScroll();
                            break;
                    } 
                },
                
                scroll: function () {
                    if (this.options.resize.method == 'scroll') {
                        var scroll = document.getScroll();
                        size = window.getSize(),
                        scrollY = (scroll.y - this.scrollDelta.y) <= 0 ? 0 : scroll.y - this.scrollDelta.y,
                        scrollX = (scroll.x - this.scrollDelta.x) <= 0 ? 0 : scroll.x - this.scrollDelta.x;
                    
                        // Scroll by Y coordinate
                        if ((size.y + scrollY) < this.size.height + (this.options.resize.padding * 2)) {
                            this.fx.popap.set({'top': -scrollY + this.options.resize.padding});
                        } 
                        else if (scrollY + size.y > this.size.height && size.y < this.size.height) {
                            this.fx.popap.set({'top': -(this.size.height - size.y + this.options.resize.padding)});
                        }
                    
                        // Scroll by X coordinate
                        if ((size.x + scrollX) < this.size.width + (this.options.resize.padding * 2)) {
                            this.fx.popap.set({'left': -scrollX + this.options.resize.padding});
                        } 
                        else if (scrollX + size.x > this.size.width && size.x < this.size.width) {
                            this.fx.popap.set({'left': -(this.size.width - size.x + this.options.resize.padding)});
                        }
                    }
                },
                
                display: function (action, display) {
               
                    // Use random effect
                    if (action.test('random', 'i')) {
                        action = this.availableTransitions.slice(0, -1).getRandom();
                    } 
                    
                    // console.log(action);
                    this.fx.popap.cancel();

                    var actionMethod = action.replace(/\s+/g, '').toLowerCase();
                    
                    var extened = {'visibility': 'visible'};
                    switch (display) {
                        case 'show':
                            this.fx.popap.set({'opacity': this.options.transitions.opacity.hide});
                            extened = Object.merge(extened, {'opacity': this.options.transitions.opacity.show});
                            this.elements.container.setStyle('display', 'block');
                            this.fx.content.set('opacity', 1);
                            break;
                        case 'hide':
                            this.fx.popap.set({'opacity': this.options.transitions.opacity.show});
                            extened = Object.merge(extened, {'opacity': this.options.transitions.opacity.hide});
                            break;
                    }
                    
                    if (actionMethod == 'slidecenter') {
                        this.fx.content.cancel();
                        this.fx.content.set('opacity', 0);
                    }
                   
                    var position = this.elements.container.getPosition();
                   
                    this.animation(display, actionMethod, position, extened).chain(function () {
                        this.state = display;
                        switch (display) {
                            case 'show':
                                actionMethod == 'slidecenter' && this.fx.content.start('opacity', 1);
                                
                                break;
                            case 'hide':
                                this.elements.container.setStyles({
                                    'display': 'none',
                                    'visibility': 'hidden'
                                });
                                break;
                        }
                        this.fireEvent(this.state.toLowerCase() + 'Complete', display);
                    }.bind(this));
                },
                
                animation: function (display, transition, position, extened) {
                    switch(transition + display.capitalize()) {
                        case 'slideupShow': 
                            return this.fx.popap.start(Object.merge({'top': [position.y - this.options.transitions.padding, position.y]}, extened));
                            break;   

                        case 'slidedownShow': 
                            return this.fx.popap.start(Object.merge({'top': [position.y + this.options.transitions.padding, position.y]}, extened));
                            break;  

                        case 'slideleftShow': 
                            return this.fx.popap.start(Object.merge({'left': [position.x + this.options.transitions.padding, position.x]}, extened)); 
                            break;  

                        case 'sliderightShow': 
                            this.fx.popap.start(Object.merge({'left': [position.x - this.options.transitions.padding, position.x]}, extened)); 
                            break;  

                        case 'slidecenterShow':                    
                            return this.fx.popap.start(Object.merge({'top': [position.y + (this.size.height / 2), position.y], 'left': [position.x + (this.size.width / 2), position.x], 'width': [0, this.size.width], 'height': [0, this.size.height] }, extened));
                            break;  
  
                        case 'fadeShow':
                            return this.fx.popap.start(Object.merge({'opacity': this.options.transitions.opacity.show}, extened));
                            break;  
                        
                        case 'noneShow': 
                            return this.fx.popap.set({'visibility': 'visible', 'opacity': 1}); 
                            break;  
                            
                        case 'slideupHide':  
                            return this.fx.popap.start(Object.merge({'top': [position.y, position.y - this.options.transitions.padding]}, extened));
                            break; 

                        case 'slidedownHide':  
                            return this.fx.popap.start(Object.merge({'top': [position.y, position.y + this.options.transitions.padding]}, extened));
                            break;

                        case 'slideleftHide':  
                            return this.fx.popap.start(Object.merge({'left': [position.x, position.x + this.options.transitions.padding]}, extened)); 
                            break; 

                        case 'sliderightHide':  
                            return this.fx.popap.start(Object.merge({'left': [position.x, position.x - this.options.transitions.padding]}, extened)); 
                            break;

                        case 'slidecenterHide': 
                            return this.fx.popap.start(Object.merge({'top': [position.y, position.y + (this.size.height / 2)], 'left': [position.x, position.x + (this.size.width / 2)], 'width': [this.size.width, 0], 'height': [this.size.height, 0] }, extened));
                            break;
                            
                        case 'fadeHide': 
                            return this.fx.popap.start(Object.merge({'opacity': this.options.transitions.opacity.hide}, extened));
                            break
                        
                        case 'noneHide':  
                            return this.fx.popap.set({'opacity': 0}).start({'visibility': 'hidden'}); 
                            break;
                    }
                    return this.fx.popap;
                },
                
                isTransitionsAvailable: function (transition) {
                    if (this.availableTransitions.indexOf(transition.replace(/\s+/g, '').toLowerCase()) == -1) {
                        throw new Error('You use a wrong transition effect');  
                        return false;
                    }
                    return true;
                },
                
                show: function () {
                    if (this.isTransitionsAvailable(this.options.transitions.show) && this.options.enable) {
                      
                        this.state = 'show';
                        
                        this.center();
                        this.fireEvent(this.state);
                        this.display(this.options.transitions.show, this.state);
                        
                        window.addEvents({
                            'resize': this.center.bind(this),
                            'scroll': this.scroll.bind(this)
                        });
                    
                        document.addEvent('keyup', function (e) {
                            (this.options.close.escape && e.key == 'esc') && this.hide();
                        }.bind(this));
                       
                    }
                },
                
                hide: function () {
                    if (this.isTransitionsAvailable(this.options.transitions.hide) && this.options.enable) {
                        this.state = 'hide';
                        
                        this.fireEvent(this.state);
                        this.display(this.options.transitions.hide, this.state);
                         
                        window.removeEvents({
                            'resize': this.center.bind(this),
                            'scroll': this.scroll.bind(this)
                        }); 
                        
                        document.removeEvent('keyup', function (e) {
                            (this.options.close.escape && e.key == 'esc') && this.hide();
                        }.bind(this));
                    }

                }
                    
            });
            
            
            NicePopup.Trigger = new Class({
                Implements: [Options, Events],

                elements: {},
                mask: null,
                window: null,
                direction: null,
                idle: false,
                           
               
                'options': {
                    'enable': true,
                    'mask': {},
                    'window': {}
                },

                initialize: function (options) {
                    
                    this.setOptions(options);

                    if (this.options.enable === false) return false;
                    
                    this.mask = new NicePopup.Mask(this.options.mask);
                    this.window = new NicePopup.Window(this.options.window);
                    
                    
                    //  this.mask.addEvent('showComplete', this.window.show.bind(this.window))
                    
                    this.mask.addEvent('hideComplete', function () {
                        this.idle = false; 
                    }.bind(this))
                   
                    
                    this.window.addEvent('hideComplete', function () {
                        this.mask.hide();
                        if (this.mask.options.enable === false) {
                            this.idle = false;
                        }
                    }.bind(this))
                    
                    this.track();
                    document.addEvent('mouseleave', function (e) {
                        if(e.client.y <= 5 && this.direction == 'up') {
                            this.show(); 
                        }
                    }.bind(this));
                },
                
                track: function () {
                    var lastY, currentY = 0;
                    document.addEvent('mousemove', function (e) {
                        lastY = currentY; 
                        currentY = e.page.y; 
                
                        if (lastY > currentY) {  
                            this.direction = 'up'; 
                        } else if (lastY < currentY) {  
                            this.direction = 'down';
                        } else {
                            this.direction = null;
                        } 
                    }.bind(this));
                },
                
                show: function () {
                    if (this.idle) return false;
                    this.idle = true;
                    if (this.mask.options.enable) {
                        return this.mask.show();
                    }
                    this.window.show();
                   
                }
            });
        </script>
        <div class="body">
            <form action="" method="POST">
                <fieldset>
                    <legend>Маска</legend>
                    <div class="caption">Отображать:</div>
                    <select name="maskEnable">
                        <option value="yes" <? echo $_POST['maskEnable'] == 'yes' || empty($_POST['maskEnable']) ? 'selected' : ''; ?>>Да</option>
                        <option value="no" <? echo $_POST['maskEnable'] == 'no' ? 'selected' : ''; ?>>Нет</option>
                    </select> 

                    <div class="caption">Цвет маски:</div>
                    <select name="maskColor">
                        <option value="#000" <? echo $_POST['maskColor'] == '#000' || empty($_POST['maskColor']) ? 'selected' : ''; ?>>Черная</option>
                        <option value="#FFF" <? echo $_POST['maskColor'] == '#FFF' ? 'selected' : ''; ?>>Белая</option>
                    </select> 

                    <div class="caption">Прозрачность маски:</div>
                    <select name="maskOpacity">
                        <option value="0.1" <? echo $_POST['maskOpacity'] == '0.1' ? 'selected' : ''; ?>>10%</option>
                        <option value="0.2" <? echo $_POST['maskOpacity'] == '0.2' ? 'selected' : ''; ?>>20%</option>
                        <option value="0.3" <? echo $_POST['maskOpacity'] == '0.3' ? 'selected' : ''; ?>>30%</option>
                        <option value="0.4" <? echo $_POST['maskOpacity'] == '0.4' ? 'selected' : ''; ?>>40%</option>
                        <option value="0.5" <? echo $_POST['maskOpacity'] == '0.5' || empty($_POST['maskOpacity']) ? 'selected' : ''; ?>>50%</option>
                        <option value="0.6" <? echo $_POST['maskOpacity'] == '0.6' ? 'selected' : ''; ?>>60%</option>
                        <option value="0.7" <? echo $_POST['maskOpacity'] == '0.7' ? 'selected' : ''; ?>>70%</option>
                        <option value="0.8" <? echo $_POST['maskOpacity'] == '0.8' ? 'selected' : ''; ?>>80%</option>
                        <option value="0.9" <? echo $_POST['maskOpacity'] == '0.9' ? 'selected' : ''; ?>>90%</option>
                        <option value="0.99" <? echo $_POST['maskOpacity'] == '0.99' ? 'selected' : ''; ?>>100%</option>
                    </select> 

                    <div class="caption">Эффект появления:</div>
                    <select name="maskEffectShow">
                        <option value="slideup" <? echo $_POST['maskEffectShow'] == 'slideup' ? 'selected' : ''; ?>>Движение сверху</option>
                        <option value="slidedown" <? echo $_POST['maskEffectShow'] == 'slidedown' ? 'selected' : ''; ?>>Движение снизу</option>
                        <option value="slideright" <? echo $_POST['maskEffectShow'] == 'slideright' ? 'selected' : ''; ?>>Движение справа</option>
                        <option value="slideleft" <? echo $_POST['maskEffectShow'] == 'slideleft' ? 'selected' : ''; ?>>Движение слева</option>
                        <option value="slidecenter" <? echo $_POST['maskEffectShow'] == 'slidecenter' ? 'selected' : ''; ?>>Разворачивание от центра</option>
                        <option value="shuttervertical" <? echo $_POST['maskEffectShow'] == 'shuttervertical' ? 'selected' : ''; ?>>Вертикальная шторка</option>
                        <option value="shutterhorizontal" <? echo $_POST['maskEffectShow'] == 'shutterhorizontal' ? 'selected' : ''; ?>>Горизонтальная шторка</option>
                        <option value="slideup+fade" <? echo $_POST['maskEffectShow'] == 'slideup+fade' ? 'selected' : ''; ?>>Движение сверху + плавное появление</option>
                        <option value="slidedown+fade" <? echo $_POST['maskEffectShow'] == 'slidedown+fade' ? 'selected' : ''; ?>>Движение снизу + плавное появление</option>
                        <option value="slideright+fade" <? echo $_POST['maskEffectShow'] == 'slideright+fade' ? 'selected' : ''; ?>>Движение справа + плавное появление</option>
                        <option value="slideleft+fade" <? echo $_POST['maskEffectShow'] == 'slideleft+fade' ? 'selected' : ''; ?>>Движение слева + плавное появление</option>
                        <option value="slidecenter+fade" <? echo $_POST['maskEffectShow'] == 'slidecenter+fade' ? 'selected' : ''; ?>>Разворачивание от центра + плавное появление</option>
                        <option value="shuttervertical+fade" <? echo $_POST['maskEffectShow'] == 'shuttervertical+fade' ? 'selected' : ''; ?>>Вертикальная шторка + плавное появление</option>
                        <option value="shutterhorizontal+fade" <? echo $_POST['maskEffectShow'] == 'shutterhorizontal+fade' ? 'selected' : ''; ?>>Горизонтальная шторка + плавное появление</option>
                        <option value="fade" <? echo $_POST['maskEffectShow'] == 'fade' || empty($_POST['maskEffectShow']) ? 'selected' : ''; ?>>Плавное появление</option>
                        <option value="none" <? echo $_POST['maskEffectShow'] == 'none' ? 'selected' : ''; ?>>Без эффекта</option>
                        <option value="random" <? echo $_POST['maskEffectShow'] == 'random' ? 'selected' : ''; ?>>Cлучайный эффект</option>
                    </select> 

                    <div class="caption">Эффект исчезновения:</div>
                    <select name="maskEffectHide">
                        <option value="slideup" <? echo $_POST['maskEffectHide'] == 'slideup' ? 'selected' : ''; ?>>Движение сверху</option>
                        <option value="slidedown" <? echo $_POST['maskEffectHide'] == 'slidedown' ? 'selected' : ''; ?>>Движение снизу</option>
                        <option value="slideright" <? echo $_POST['maskEffectHide'] == 'slideright' ? 'selected' : ''; ?>>Движение справа</option>
                        <option value="slideleft" <? echo $_POST['maskEffectHide'] == 'slideleft' ? 'selected' : ''; ?>>Движение слева</option>
                        <option value="slidecenter" <? echo $_POST['maskEffectHide'] == 'slidecenter' ? 'selected' : ''; ?>>Cворачивание от центра</option>
                        <option value="shuttervertical" <? echo $_POST['maskEffectHide'] == 'shuttervertical' ? 'selected' : ''; ?>>Вертикальная шторка</option>
                        <option value="shutterhorizontal" <? echo $_POST['maskEffectHide'] == 'shutterhorizontal' ? 'selected' : ''; ?>>Горизонтальная шторка</option>
                        <option value="slideup+fade" <? echo $_POST['maskEffectHide'] == 'slideup+fade' || empty($_POST['maskEffectHide']) ? 'selected' : ''; ?>>Движение сверху + плавное появление</option>
                        <option value="slidedown+fade" <? echo $_POST['maskEffectHide'] == 'slidedown+fade' ? 'selected' : ''; ?>>Движение снизу + плавное появление</option>
                        <option value="slideright+fade" <? echo $_POST['maskEffectHide'] == 'slideright+fade' ? 'selected' : ''; ?>>Движение справа + плавное появление</option>
                        <option value="slideleft+fade" <? echo $_POST['maskEffectHide'] == 'slideleft+fade' ? 'selected' : ''; ?>>Движение слева + плавное появление</option>
                        <option value="slidecenter+fade" <? echo $_POST['maskEffectHide'] == 'slidecenter+fade' ? 'selected' : ''; ?>>Cворачивание от центра + плавное появление</option>
                        <option value="shuttervertical+fade" <? echo $_POST['maskEffectHide'] == 'shuttervertical+fade' ? 'selected' : ''; ?>>Вертикальная шторка + плавное появление</option>
                        <option value="shutterhorizontal+fade" <? echo $_POST['maskEffectHide'] == 'shutterhorizontal+fade' ? 'selected' : ''; ?>>Горизонтальная шторка + плавное появление</option>
                        <option value="fade" <? echo $_POST['maskEffectHide'] == 'fade' ? 'selected' : ''; ?>>Плавное исчезновение</option>
                        <option value="none" <? echo $_POST['maskEffectHide'] == 'none' ? 'selected' : ''; ?>>Без эффекта</option>
                        <option value="random" <? echo $_POST['maskEffectHide'] == 'random' ? 'selected' : ''; ?>>Cлучайный эффект</option>
                    </select> 

                    <div class="caption">Скорость эффекта:</div>
                    <select name="maskSpeedEffect">
                        <option value="short" <? echo $_POST['maskSpeedEffect'] == 'short' || empty($_POST['maskSpeedEffect']) ? 'selected' : ''; ?>>Быстро</option>
                        <option value="normal" <? echo $_POST['maskSpeedEffect'] == 'normal' ? 'selected' : ''; ?>>Нормально</option>
                        <option value="long" <? echo $_POST['maskSpeedEffect'] == 'long' ? 'selected' : ''; ?>>Медленно</option>
                        <option value="8000" <? echo $_POST['maskSpeedEffect'] == '8000' ? 'selected' : ''; ?>>Сверхмедленно</option>
                    </select> 

                    <div class="caption">Уравнение эффекта:</div>
                    <select name="maskEquation">
                        <option value="linear" <? echo $_POST['maskEquation'] == 'linear' ? 'selected' : ''; ?>>Линейный</option>
                        <option value="sine:out" <? echo $_POST['maskEquation'] == 'sine:out' ? 'selected' : ''; ?>>Синусоидальный</option>
                        <option value="expo:out" <? echo $_POST['maskEquation'] == 'expo:out' ? 'selected' : ''; ?>>Экспоненциальный</option>
                        <option value="cubic:out" <? echo $_POST['maskEquation'] == 'cubic:out' ? 'selected' : ''; ?>>Кубичный</option>
                    </select> 
                </fieldset>

                <fieldset>
                    <legend>Окно</legend>
                    <div class="caption">Ширина окна:</div>
                    <input type="text" name="winWidth" value="<?php echo (int) $_POST['winWidth'] > 0 ? (int) $_POST['winWidth'] : 300; ?>">

                        <div class="caption">Высота окна:</div>
                        <input type="text" name="winHeight" value="<?php echo (int) $_POST['winHeight'] > 0 ? (int) $_POST['winHeight'] : 300; ?>">

                            <div class="caption">Кнопка закрытия:</div>
                            <select name="winClosePosition">
                                <option value="right" <? echo $_POST['winClosePosition'] == 'right' || empty($_POST['winClosePosition']) ? 'selected' : ''; ?>>Cправа</option>
                                <option value="left" <? echo $_POST['winClosePosition'] == 'left' ? 'selected' : ''; ?>>Слева</option>
                            </select> 

                            <div class="caption">Закрывать кнопкой "Escape":</div>
                            <select name="winCloseByEsc">
                                <option value="yes" <? echo $_POST['winCloseByEsc'] == 'yes' || empty($_POST['winCloseByEsc']) ? 'selected' : ''; ?>>Да</option>
                                <option value="no" <? echo $_POST['winCloseByEsc'] == 'no' ? 'selected' : ''; ?>>Нет</option>
                            </select> 

                            <div class="caption">При измененные размера окна:</div>
                            <select name="winResizeMethod">
                                <option value="fit" <? echo $_POST['winResizeMethod'] == 'fit' || empty($_POST['winResizeMethod']) ? 'selected' : ''; ?>>Изменять размер попапа, в зависимости от размера окна броузера</option>
                                <option value="scroll" <? echo $_POST['winResizeMethod'] == 'scroll' ? 'selected' : ''; ?>>Прокручивать попап вместе с скролом</option>
                            </select> 

                            <div class="caption">Эффект появления:</div>
                            <select name="winEffectShow">
                                <option value="slideup" <? echo $_POST['winEffectShow'] == 'slideup' || empty($_POST['winEffectShow']) ? 'selected' : ''; ?>>Движение сверху</option>
                                <option value="slidedown" <? echo $_POST['winEffectShow'] == 'slidedown' ? 'selected' : ''; ?>>Движение снизу</option>
                                <option value="slideright" <? echo $_POST['winEffectShow'] == 'slideright' ? 'selected' : ''; ?>>Движение справа</option>
                                <option value="slideleft" <? echo $_POST['winEffectShow'] == 'slideleft' ? 'selected' : ''; ?>>Движение слева</option>
                                <option value="slidecenter" <? echo $_POST['winEffectShow'] == 'slidecenter' ? 'selected' : ''; ?>>Разворачивание от центра</option>
                                <option value="fade" <? echo $_POST['winEffectShow'] == 'fade' ? 'selected' : ''; ?>>Плавное появление</option>
                                <option value="none" <? echo $_POST['winEffectShow'] == 'none' ? 'selected' : ''; ?>>Без эффекта</option>
                                <option value="random" <? echo $_POST['winEffectShow'] == 'random' ? 'selected' : ''; ?>>Cлучайный эффект</option>
                            </select> 

                            <div class="caption">Эффект исчезновения:</div>
                            <select name="winEffectHide">
                                <option value="slideup" <? echo $_POST['winEffectHide'] == 'slideup' || empty($_POST['winEffectHide']) ? 'selected' : ''; ?>>Движение сверху</option>
                                <option value="slidedown" <? echo $_POST['winEffectHide'] == 'slidedown' ? 'selected' : ''; ?>>Движение снизу</option>
                                <option value="slideright" <? echo $_POST['winEffectHide'] == 'slideright' ? 'selected' : ''; ?>>Движение справа</option>
                                <option value="slideleft" <? echo $_POST['winEffectHide'] == 'slideleft' ? 'selected' : ''; ?>>Движение слева</option>
                                <option value="slidecenter" <? echo $_POST['winEffectHide'] == 'slidecenter' ? 'selected' : ''; ?>>Cворачивание от центра</option>
                                <option value="fade" <? echo $_POST['winEffectHide'] == 'fade' ? 'selected' : ''; ?>>Плавное исчезновение</option>
                                <option value="none" <? echo $_POST['winEffectHide'] == 'none' ? 'selected' : ''; ?>>Без эффекта</option>
                                <option value="random" <? echo $_POST['winEffectHide'] == 'random' ? 'selected' : ''; ?>>Cлучайный эффект</option>
                            </select> 

                            <div class="caption">Скорость эффекта:</div>
                            <select name="winSpeedEffect">
                                <option value="short" <? echo $_POST['winSpeedEffect'] == 'short' || empty($_POST['winSpeedEffect']) ? 'selected' : ''; ?>>Быстро</option>
                                <option value="normal" <? echo $_POST['winSpeedEffect'] == 'normal' ? 'selected' : ''; ?>>Нормально</option>
                                <option value="long" <? echo $_POST['winSpeedEffect'] == 'long' ? 'selected' : ''; ?>>Медленно</option>
                            </select> 

                            <div class="caption">Уравнение эффекта:</div>
                            <select name="winEquation">
                                <option value="linear" <? echo $_POST['winEquation'] == 'linear' ? 'selected' : ''; ?>>Линейный</option>
                                <option value="sine:out" <? echo $_POST['winEquation'] == 'sine:out' || empty($_POST['winEquation']) ? 'selected' : ''; ?>>Синусоидальный</option>
                                <option value="expo:out" <? echo $_POST['winEquation'] == 'expo:out' ? 'selected' : ''; ?>>Экспоненциальный</option>
                                <option value="cubic:out" <? echo $_POST['winEquation'] == 'cubic:out' ? 'selected' : ''; ?>>Кубичный</option>
                                <option value="back:out" <? echo $_POST['winEquation'] == 'back:out' ? 'selected' : ''; ?>>Обратный</option>
                            </select> 
                            </fieldset>
                            <br clear="all">
                                <fieldset class="text">
                                    <legend>Текст окна</legend>  
                                    <textarea name="winText"><? echo!empty($_POST['winText']) ? $_POST['winText'] : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"; ?></textarea>
                                </fieldset>
                                <div class="submit">
                                    <input type="submit" class="submit" value="Применить" />
                                </div>
                                </form> 
                                <?
                                foreach (range(0, 75) as $numer) {
                                    echo $numer . "<br>";
                                }
                                ?>
                                </div>
                                <?php
                                if ($_SERVER['REQUEST_METHOD'] == 'POST') {
                                    ?>
                                    <script type="text/javascript">
                                        new NicePopup.Trigger({
                                            'mask': {
                                                'enable': <?php echo $_POST['maskEnable'] == 'yes' ? 'true' : 'false'; ?>,
                                                'color': '<?php echo $_POST['maskColor']; ?>',
                                                'opacity': <?php echo $_POST['maskOpacity']; ?>,
                                                'transitions': {
                                                    'show': '<?php echo $_POST['maskEffectShow']; ?>',
                                                    'hide': '<?php echo $_POST['maskEffectHide']; ?>',
                                                    'duration': '<?php echo $_POST['maskSpeedEffect']; ?>',
                                                    'equation': '<?php echo $_POST['maskEquation']; ?>'
                                                } 
                                            },
                                            'window': {
                                                'width': <?php echo (int) $_POST['winWidth'] > 0 ? (int) $_POST['winWidth'] : 300; ?>,
                                                'height': <?php echo (int) $_POST['winHeight'] > 0 ? (int) $_POST['winHeight'] : 300; ?>,
                                                'data': '<?php echo $_POST['winText']; ?>',
                                                'close': {
                                                    'position': '<?php echo $_POST['winClosePosition']; ?>',
                                                    'escape': <?php echo (bool) $_POST['winCloseByEsc'] == 'yes'; ?>
                                                },
                                                'resize': {
                                                    'method': '<?php echo $_POST['winResizeMethod']; ?>',
                                                    'padding': 15
                                                },
                                                                                                            
                                                'transitions': {
                                                    'show': '<?php echo $_POST['winEffectShow']; ?>',
                                                    'hide': '<?php echo $_POST['winEffectHide']; ?>',
                                                    'duration': '<?php echo $_POST['winSpeedEffect']; ?>',
                                                    'equation': '<?php echo $_POST['winEquation']; ?>'
                                                }
                                            }
                                        });     
                                    </script>
                                    <?
                                }
                                ?>

                                </body>
                                </html>